<script setup>
import store from "../store";
import { computed, onMounted, reactive, ref } from 'vue-demi';
import Player from 'xgplayer';
import { ElMessageBox } from "element-plus";
import { ElScrollbar } from "element-plus";
import { floor } from "lodash";
import { ElMessage } from "element-plus";
import { Video } from "../../model/resource";

let data = computed(() => store.state.router.data)
// 视频播放相关
let player
const video_params = reactive({
    id: 'vs',
    url: data.url,
    pip: true,
    autoplay: true,
    playbackRate: [0.5, 0.75, 1, 1.5, 1.75, 2],
})
onMounted(() => {
    player = new Player(video_params)
})
function onFPlayer(ms) {
    if (player.paused)
        player.play()
    player.currentTime = ms / 1000
}

// 搜索相关 @WAIT 视频搜索的结果也可以导出, 还有圈出的模式和不圈出的模式, 搜索一般是点击才打开而不是直接就放在右边
const search_key = ref()
async function onInputEnter() {
    if (search_key.value) {
        let result = await new Video().search(data.id, search_key.value)
        data.kfs = result.kfs
        console.log('搜索结果', result)
    } else {
        ElMessageBox.prompt('搜索内容不能为空', '提示', {
            showInput: false,
            showCancelButton: false,
            showConfirmButton: false,
            showClose: false
        })
    }
}


const value = ref(1)
const scale_px = 318.6 // 最普通的状态下适用, 可以通过屏幕比例调整
const scroll = ({ scrollTop }) => {
    console.log('scroll:', scrollTop)
    value.value = (scrollTop / scale_px + 1)
}

const innerRef = ref()
const scrollbarRef = ref()
const inputSlider = (value) => {
    console.log('inputSlider', value)
    scrollbarRef.value.setScrollTop((value - 1) * scale_px)
}

const formatTooltip = (value) => {
    console.log('formatTooltip', value)
    console.log('scrollbarRef', scrollbarRef)
    //    proxy = new Proxy({},{})
    //    proxy.getItem()
    console.log('innerRef', innerRef)
    return `${Math.ceil(value)} 页`
}


const showSearch = ref(true)



</script>

<template >
    <el-container>
        <el-header class="el-header">{{ data.name }}</el-header>
        <el-container class="el-container">
            <el-main class="el-main-container">
                <div class="player-container">
                    <div id="vs" class="xgplayer"></div>
                </div>
                <div class="">其它内容</div>
                
            </el-main>
            <!-- <el-drawer v-model="showSearch" title="I am the title" :with-header="false"> -->

                <el-aside class="el-aside">
                    <el-row class="input-container">
                        <!-- <el-col :span="16"> -->
                        <el-input class="el-input" @keyup.enter="onInputEnter" v-model="search_key"
                            placeholder="请输入需要搜索的内容 (回车搜索)"></el-input>
                        <!-- </el-col> -->
                    </el-row>

                    <el-scrollbar ref="scrollbarRef" class="el-scrollbar" @scroll="scroll" :scrollTo="scrollTo">
                        <div v-for="pf, index of data.kfs">
                            <div ref="innerRef" class="f-container">
                                <img :src="pf.img_url" style="width: 100%" class="f-image" />
                                <div class="f-operation">
                                    <div class="f-title">（第{{ index + 1 }}页）时间点：{{ pf.time }}</div>
                                    <div class="f-button-container">
                                        <el-button :round="true" size="small" @click="onFPlayer(pf.ms)"
                                            class="f-button">跳转
                                        </el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-scrollbar>

                    <el-slider class="el-slider" v-model="value" :min="1" :max="data.kfs.length"
                        :format-tooltip="formatTooltip" @input="inputSlider" />
                </el-aside>

            <!-- </el-drawer> -->
        </el-container>
    </el-container>
    <div>This is show Page</div>
    <h5>TODO - PlayVideo And SearchVideo</h5>
    <!-- <el-button @click="onBack" >返回上一级</el-button> -->
</template>

<style>
.el-container {
    display: flex;
    flex-direction: row;
}

.el-main-container {
    flex: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.el-header {
    margin-bottom: 20px;
}

.el-aside {

    flex: 3;
    width: 500px;
    height: 100%;
    background: #f7f4f4;
    border-left: #a4b7b7 solid 3px;
}

.el-scrollbar {
    height: 525px;
    padding: 0 !important;
}

.el-slider {
    width: 100% !important;
    height: 38px;
}

.input-container {
    padding: 4px 0;
    background: #e8efef;
}

.el-input {
    margin: 2px 60px;
}

.player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.xgplayer {
    width: 100% !important;
    height: 100% !important;
}

.el-header {
    height: 20px;
}

.f-container {
    width: 100%;
    margin-top: 4px;
    height: fit-content;
    border-bottom: 2.2px #75a1a1 solid;
    border-radius: 1%;

}

.f-operation {
    margin: 0 2px;
    padding: 3px 0;
    display: flex !important;
    flex-direction: row;
    width: 100% !important;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    background: #f7e5e5;
    border-bottom-left-radius: 3%;
    border-bottom-right-radius: 3%;
}

.f-title {
    height: 50rpx;
    line-height: 50prx;
    text-align: center;
    flex: 7;
}

.f-button-container {
    margin: 0;
    flex: 3;
    align-self: center;
    color: #ffffff;
}

.f-button {}
</style>